<template>
  <view class="chart-line">
    <view 
      id="lineChart" 
      class="chart-container"
      :prop="chartData"
      :change:prop="echartModule.updateChart"
    ></view>
  </view>
</template>

<script>
export default {
  props: {
    // 数据数组，每项包含 completeness, fillWordsStuttering, fluency, confidence, speedVolume
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: []
    }
  },
  watch: {
    dataList: {
      handler(val) {
        this.chartData = val || []
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.chartData = this.dataList || []
  }
}
</script>

<script module="echartModule" lang="renderjs">
import * as echarts from 'echarts';
let chart = null

export default {
  mounted() {
    // 动态加载echarts
    this.initChart()
  },
  methods: {
    initChart() {
      const container = document.getElementById('lineChart')
      if (!container || !echarts) return
      
      chart = echarts.init(container)
      
      // 初始化空数据
      this.setOption([])
    },
    updateChart(newValue, oldValue, ownerInstance, instance) {
      this.$nextTick(() => {
        this.setOption(newValue)
      })
    },
    setOption(dataList) {
      if (!chart || !echarts) return
      
      // 处理数据
      const dataLength = dataList.length
      const xAxisData = []
      const completenessData = []
      const fillWordsStutteringData = []
      const fluencyData = []
      const confidenceData = []
      const speedVolumeData = []
      
      dataList.forEach((item, index) => {
        xAxisData.push('第' + (index + 1) + '次')
        completenessData.push(item.completeness || 0)
        fillWordsStutteringData.push(item.fillWordsStuttering || 0)
        fluencyData.push(item.fluency || 0)
        confidenceData.push(item.confidence || 0)
        speedVolumeData.push(item.speedVolume || 0)
      })
      
      // 根据数据量决定x轴标签显示策略
      let xAxisLabelInterval = 'auto'
      if (dataLength > 10) {
        xAxisLabelInterval = Math.floor(dataLength / 6) // 大约显示6-7个标签
      } else if (dataLength > 5) {
        xAxisLabelInterval = 1 // 每隔一个显示
      } else {
        xAxisLabelInterval = 0 // 全部显示
      }
      
      const option = {
        color: ['#155BD4', '#4CC273', '#3AE0D5', '#FFAF40', '#159BD4'],
        title: {
          text: '单位：分',
          left: 16,
          top: 8,
          textStyle: {
            color: '#999999',
            fontSize: 12,
            fontWeight: 400
          }
        },
        grid: {
          top: 50,
          left: 16,
          right: 16,
          bottom: uni.upx2px(100),
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#E5E7EB',
              width: 1,
              type: 'solid'
            }
          }
        },
        legend: {
          data: ['完整度', '准确度', '流畅度', '自信度', '语速音量'],
          bottom: uni.upx2px(32),
          left: 'center',
          icon: 'rect',
          itemWidth: uni.upx2px(16),
          itemHeight: uni.upx2px(6),
          textStyle: {
            color: '#666666',
            fontSize: uni.upx2px(22)
          }
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          boundaryGap: true,
          axisLine: {
            lineStyle: {
              color: '#E5E7EB'
            }
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12,
            interval: xAxisLabelInterval,
            rotate: dataLength > 15 ? 45 : 0
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999999',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#F5F5F5',
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '完整度',
            type: 'line',
            data: completenessData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#155BD4'
            },
            itemStyle: {
              color: '#155BD4'
            }
          },
          {
            name: '准确度',
            type: 'line',
            data: fillWordsStutteringData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#4CC273'
            },
            itemStyle: {
              color: '#4CC273'
            }
          },
          {
            name: '流畅度',
            type: 'line',
            data: fluencyData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#3AE0D5'
            },
            itemStyle: {
              color: '#3AE0D5'
            }
          },
          {
            name: '自信度',
            type: 'line',
            data: confidenceData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#FFAF40'
            },
            itemStyle: {
              color: '#FFAF40'
            }
          },
          {
            name: '语速音量',
            type: 'line',
            data: speedVolumeData,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            lineStyle: {
              width: 2,
              color: '#159BD4'
            },
            itemStyle: {
              color: '#159BD4'
            }
          }
        ]
      }
      
      chart.setOption(option, true)
    }
  },
  beforeDestroy() {
    if (chart) {
      chart.dispose()
      chart = null
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-line {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .chart-container {
    width: 100%;
    height: 600rpx;
  }
}
</style>

